<template>
  <div class="text-center">
    <h2>？？？我是谁 ？？？</h2>
    <div class="img-container shadow"  @click="clickPokemon()">
        <img :src="pokemonData.data[0].detail.imgUrl" alt="我是谁？？？" title="我是谁？？？">
    </div>
    <br>
    <span class="tips">点击图片揭秘</span>
  </div>
  
</template>

<script>
export default {
    name: 'WhoAmI',
    props: ['pokemonData', 'setCurrentPokemon'],
    methods:{
        clickPokemon(){
        /*调用父组件通过props传递下来的方法
        告诉父组件是哪个宝可梦被点击了*/
        this.setCurrentPokemon(this.pokemonData.data[0])
        //路由跳转至宝可梦信息界面
        this.$router.push({
          path: '/pokemonInfo',
        })
      }
    }
}
</script>

<style lang="less" scoped>
img {
    filter: brightness(0);
    width: 90%;
}
.img-container {
    max-width: 300px;
    padding: 40px 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(32, 177, 129);
    border: 10px solid rgb(163, 163, 163);
    text-align: center;
}
h2 {
    color: yellow;
    text-shadow: 1px 1px 1px black;
}
</style>